<template>
	<view class="container">
		<u-navbar :background="{ background: '#6EC9E1' }" :is-fixed="true" :z-index='999' :border-bottom="false"
			back-icon-color="#FFF">
		</u-navbar>

		<view class="main">
			<!-- start -->
			<view class="title">
				<text>{{info.day_text?info.day_text+'--':''}}{{info.status_text||''}}</text>
				<view class="fts">回访时间: {{info.createtime||'' }}</view>
			</view>
			<!-- end -->
			<!-- start -->
			<view class="card"
				@click="goTo(  user.job==2 ?'/sub/center/mine/userInfo?id='+info.user_id :'/sub/center/mine/userInfo?id='+info.doctor_id )">
				<view class="left">
					<u-avatar :size='96' mode="square"
						:src="user.job==1?info.doctor_info.avatar:info.user_info.avatar"></u-avatar>
					<view class="docker">
						<p>{{user.job==1?info.doctor_info.username:info.user_info.username }}</p>
						<view v-if="user.job==1" class="fts">{{info.doctor_info.speciality||''}}</view>
						<view v-else class="fts">{{info.user_info.speciality||''}}</view>
					</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#B6B6B6" size="24"></u-icon>
				</view>
			</view>
			<!-- end -->
			<!-- start -->
			<view v-if="info.status==0">
				<view class="card form">
					<view class="f-p">
						<view>咨询日期: <span>{{info.advicetime||info.adving_time}}</span></view>
						<view>咨询人: <span>{{info.user_info.username||''}}({{ info.member_info.username }})</span></view>
						<view>咨询问题: <span>{{info.problem||''}}</span></view>
					</view>
					<u-line />
					<view class="f-p">
						<view class="lable">问题好转情况</view>
						<view class="item">
							<u-radio-group v-model="form.disease" width="50%">
								<u-radio @change="radioChange" v-for="(item, index) in disease" :key="index"
									:name="index">
									{{item}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>

				</view>
				<view class="card form f-p">
					<view class="lable">备注</view>
					<view class="item">
						<u-input v-model="form.remark" maxlength='200' type="textarea" height='160'
							placeholder='请输入备注' />
						<p>{{form.remark.length||0}}/200</p>
					</view>
					<u-upload :width="150" :height="150" ref="uUpload" :action="action" :show-progress='false'
						:max-size="5 * 1024 * 1024" max-count="4" @on-change='uploadimg' @on-remove='removeimg'
						:form-data='formdata'>
					</u-upload>
				</view>

				<view v-if="user.job==1" class="btn" @click="submit">提交</view>
				<p class="fts f-p">*提示: 24，48，72小时对您问题的转归情况进行回访，感谢参与!</p>
			</view>
			<!-- end -->
			<!-- start -->
			<view v-else>
				<view class="card from2">
					<u-form :label-style="{'font-size':'13px',color:'#505255'}" label-position='top'>
						<u-form-item label="咨询时间">
							<u-input label-width='0' :disabled="true" placeholder='' v-model="info.advicetime"
								:custom-style="{'font-weight': 'bold;','font-size': '16px;'}" />
						</u-form-item>
						<u-form-item label="咨询人">
							<u-input label-width='0' :disabled="true" placeholder='' v-model="info.user_info.username"
								:custom-style="{'font-weight': 'bold;','font-size': '16px;'}" />
						</u-form-item>
						<u-form-item label="咨询问题" :border-bottom='false'>
							<u-input label-width='0' :disabled="true" v-model="info.problem" placeholder='现场咨询回访'
								:custom-style="{'font-weight': 'bold;','font-size': '16px;'}" />
						</u-form-item>

					</u-form>
				</view>
				<view class="card from2">
					<u-form :label-style="{'font-size':'13px',color:'#505255'}" label-position='top'>
						<u-form-item label="问题好转情况">
							<u-input label-width='0' :disabled="true" placeholder='' v-model="info.disease_text"
								:custom-style="{'font-weight': 'bold;','font-size': '16px;'}" />
						</u-form-item>
						<u-form-item label="备注" :border-bottom='false'>
							<u-input label-width='0' :disabled="true" placeholder='无' v-model="info.remark"
								:custom-style="{'font-weight': 'bold;','font-size': '16px;'}" />
							<image @click.stop="previewImage(src)" class="_img" :src="src" v-for="src in images "
								mode="widthFix"></image>
						</u-form-item>

					</u-form>
				</view>

				<navigator class="card " v-if="user.job==1" :url="'/sub/session-info/thank?id='+info.doctor_id">
					<view class="thank">
						<image src="../../../static/icon/zan.png" mode="widthFix"></image>认可他，去给他送赞
					</view>
					<u-icon name="arrow-right" color="#B6B6B6" size="24"></u-icon>
				</navigator>

				<view class="button" @click="tochat(chatId)">
					<span>{{ user.job==1?'护航员':'联系用户'}}</span>
				</view>
			</view>
			<!-- end -->
			<!-- 		<view v-if="user.job==1" class="dsc_remake">
				<p>温馨提示：</p>
				<p>未见面，资料搜集不全面，意见粗糙仅供参考、对比。面谈才有更精准意见。</p>
				<p>生活咨询探讨，专业人士尽自己所能，线上把自己知道的专业知识，分享给大家。</p>
			</view> -->
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		followdetail,
		userback,
		chat
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {},
				disease: [],
				user: {},
				chatId: '',
				images: [],
				form: {
					disease: '',
					remark: '',
					images: ''
				},
				action: '',
				formdata: new Object(),
			}
		},
		onLoad(e) {
			this.action = this.ws.upload;
			this.init(e.id)
		},
		methods: {
			init(id) {
				let that = this
				that.form.follow_id = id
				that.user = that.ws.getUserInfo()
				followdetail({
					'id': id
				}).then(res => {
					if (res.code == 1) {
						that.info = res.data.detail
						that.disease = res.data.disease
						that.images = that.info.images
						if(!that.info.advicetime){
							that.info.advicetime=that.info.adving_time
						}
						if (that.user.job == 2) {
							that.chatId = that.info.user_id
						} else {
							that.chatId = that.info.doctor_id
						}

					} else {
						that.$refs.uToast.show({
							title: res.msg
						})
					}
				})
			},
			submit() {
				let that = this,
					src = ''

				that.images.forEach(item => {
					if (src) {
						src = src + ',' + item
					} else {
						src = item
					}
				})
				that.form.images = src
				userback(that.form).then(res => {
					uni.showToast({
						title: res.msg
					})
					if (res.code == 1) {
						uni.navigateBack()
					}
				})
			},
			// 图片上传
			uploadimg(res, index, lists) {
				res = JSON.parse(res.data);
				if (res.code == 1) {
					let src = res.data.fullurl
					this.images.push(src)
				}
			},
			removeimg(index, lists, name) {
				this.images.splice(index, 1)
			},
			radioChange(e) {
				console.log(this.form);
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			tochat(id) {
				let that = this
				chat({
					'user_id': id
				}).then(res => {
					if (res.code == 1) {
						that.ws.tochat(res.data.session_id)
					}
				})
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				})
			},
		}

	}
</script>

<style lang="less">
	.dsc_remake {
		margin-top: 40rpx;
		color: #ff5500;
		font-size: 14px;
	}

	.container {
		background: url('@/static/img/mine/header-bg.png');
		background-size: 100% 30vh;
		background-repeat: no-repeat;
		background-color: #EEE;
		min-height: 100vh;
		position: relative;
		padding: 30rpx;

		.fts {
			font-size: 13px;
			opacity: 0.6;
		}

		.main {
			padding-bottom: 80px;

			.left {
				display: flex;
				align-items: center;
			}

			.title {
				color: #FFF;
				text-align: center;

				text {
					font-size: 24px;
				}

				view {
					margin-top: 10rpx;
					margin-bottom: 30px;
				}

			}

			._img {
				width: 60px;
				margin-right: 20rpx;
				border-radius: 4px;
			}

			.card {
				margin-top: 20rpx;
				background-color: #FFF;
				border-radius: 16rpx;
				padding: 40rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.docker {
					margin-left: 16rpx;
					line-height: 48rpx;
				}

				.thank {
					display: flex;
					align-items: center;

					image {
						width: 21px;
						margin-right: 20rpx;
					}
				}
			}

			.f-p {
				padding: 30rpx !important;
				color: #666666;
				font-size: 14px;
				line-height: 25px;

				span {
					margin-left: 20rpx;
				}
			}

			.from2 {
				display: block;
				padding: 0 30rpx;
			}

			.form {
				display: block;
				padding: unset;

				.lable {
					font-size: 18px;
				}

				.item {
					margin-top: 20rpx;

					p {
						text-align: end;
					}
				}
			}

			.button {
				padding: 0 40rpx;
				position: fixed;
				right: 0;
				bottom: 0;
				height: 60px;
				width: 100vw;
			}
		}

	}
</style>